﻿@page "/inputnumbers"
@inject IStringLocalizer<InputNumbers> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <div class="demo-inputnumber">
        <BootstrapInputNumber Value="@BindValue" IsSelectAllTextOnFocus="true" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Range">
    <div class="demo-inputnumber">
        <BootstrapInputNumber Value="@BindValue" Max="10" Min="1" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="ShowButton">
    <p>@Localizer["P1"]</p>
    <div class="demo-inputnumber">
        <BootstrapInputNumber ShowButton="true" Value="@BindValue" Max="10" Min="0" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Step">
    <div class="demo-inputnumber">
        <p>@Localizer["P2"]</p>
        <BootstrapInputNumber ShowButton="true" Value="5" Color="Color.Danger" />
    </div>
    <div class="demo-inputnumber mt-3">
        <p>@Localizer["P2"]</p>
        <BootstrapInputNumber ShowButton="true" Value="10" Step="10" Color="Color.Success" />
    </div>
    <div class="demo-inputnumber mt-3">
        <p>@Localizer["P2"]</p>
        <BootstrapInputNumber ShowButton="true" Value="0.5" Step="0.1" Formatter="@Formatter" Color="Color.Warning" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Color">
    <p>@Localizer["P5"]</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Danger" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Dark" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Secondary" />
            </div>
        </div>
    </div>
    <p class="mt-3">@Localizer["P6"]</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindFloatValue" Color="Color.Danger" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDoubleValue" Color="Color.Dark" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDecimalValue" Color="Color.Secondary" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="DateType">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindShortValue" DisplayText="Short" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindValue" DisplayText="Int" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindLongValue" DisplayText="Long" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindFloatValue" DisplayText="Float" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDoubleValue" DisplayText="Double" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDecimalValue" DisplayText="Decimal" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Disabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="10" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="20" IsDisabled="true" ShowButton="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="ValidateForm">
    <p>@((MarkupString)Localizer["p7"].Value)</p>
    <Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" />
    </ValidateForm>
    <Divider Text="@Localizer["Divider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="false" />
    <Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" DisplayText="@Localizer["InputText"]" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
